import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Icon,
  Form,
  Input,
  Card,
  message,
  Button,
  Row,
  Col,
  Upload,
  Radio,
} from 'antd';

import CustomerList from '../../../components/Falcon/CustomerList';

import ImageDisplayer from '../../../components/Falcon/Attachment/ImageDisplayer';
import novideo from '../../../assets/novideo.svg';
import { solo } from '../../../common/solo';
import nopictures from '../../../assets/nopictures3.svg';


const FormItem = Form.Item;
const RadioGroup = Radio.Group;

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 18,
  },
};

@connect(({ risk, customer }) => ({
  risk,
  customer,
}))
@Form.create()
export default class CustomerChecker extends PureComponent {
  state = {
    attachmentMap: {
      contract: [],
    },
  };

  componentDidMount() {
    const { risk } = this.props;
    const { riskBusinessDetails } = risk;
    const { customerVerify } = riskBusinessDetails;

    const attachmentMap = this.state.attachmentMap;
    // console.log("customerVerify", customerVerify)
    if (customerVerify.willVerify.videoSign.length > 0) {
      for (let i = 0; i < customerVerify.willVerify.videoSign.length; i++) {
        attachmentMap.contract.push({
          uid: customerVerify.willVerify.videoSign[i],
          name: customerVerify.willVerify.videoSign[i],
          key: customerVerify.willVerify.videoSign[i],
          status: 'done',
          url: solo.fileDownload + customerVerify.willVerify.videoSign[i],
        });
      }
    }
    this.setState({
      attachmentMap,
    });
  }

  renderCustomerFooter(riskBusinessDetails, customer, index) {
    const { checkDetailsValue } = this.props;
    const { getFieldDecorator } = this.props.form;
    const { customerVerify } = riskBusinessDetails;
    const { identityVerify } = customerVerify;
    const formItemLayoutOfFooter = {
      labelCol: {
        span: 3,
      },
      wrapperCol: {
        span: 21,
      },
    };
    return (
      <FormItem label="审批意见" {...formItemLayoutOfFooter}>
        {getFieldDecorator(`identityVerify1[${index}]`, {
          initialValue: identityVerify.customers[index].identityVerify,
        })(
          <Radio.Group disabled={!checkDetailsValue}>
            <Radio value={1}>
              <span style={{ color: 'green' }}>
                一致<Icon type="check" />
              </span>
            </Radio>
            <Radio value={0}>
              <span style={{ color: 'red' }}>
                不同<Icon type="close" />
              </span>
            </Radio>
          </Radio.Group>
        )}
      </FormItem>
    );
  }

  haandleCustomerSubmit = () => {
    const { dispatch } = this.props;
    const { validateFieldsAndScroll } = this.props.form;
    const { risk } = this.props;
    const { riskBusinessDetails } = risk;
    const { customerVerify } = riskBusinessDetails;
    validateFieldsAndScroll((error, values) => {
      if (!error) {
        // console.log("haandleCustomerSubmit===", customerVerify)
        let identityVerify = [];
        if (values.identityVerify1.length > 0) {
          for (let i = 0; i < values.identityVerify1.length; i++) {
            identityVerify.push({
              customerId: customerVerify.identityVerify.customers[i].id,
              verify: values.identityVerify1[i],
              relation: customerVerify.identityVerify.customers[i].relation,
            });
          }
        }
        // console.log("identityVerify", identityVerify)
        dispatch({
          type: 'risk/commitCustomerVerify',
          payload: {
            projectId: this.props.projectId,
            ...values,
            identityVerify,
          },
          callback: () => {
            const { risk: { riskResult } } = this.props;
            if (riskResult.code == 200) {
              message.success('提交成功');
              dispatch({
                type: 'risk/getBusinessDetails',
                payload: {
                  projectId: this.props.projectId,
                },
              });
              // dispatch(routerRedux.push('/risk/reviewList'));
            } else {
              message.error(riskResult.message);
            }
          },
        });
      }
    });
  };

  handleHomeAddressVerify = state => {
    switch (state) {
      case 1:
        return '自有住房';
      case 2:
        return '分期付款购房';
      case 3:
        return '租房';
      case 4:
        return '其他';
      case 5:
        return '集体宿舍';
      case 6:
        return '单位分配';
    }
  };

  render() {
    const { risk } = this.props;
    const { riskBusinessDetails } = risk;
    const { customerVerify } = riskBusinessDetails;

    const { hideDocuments } = this.props;
    const { hideThirdVerify } = this.props;
    const { checkDetailsValue } = this.props;

    const { getFieldDecorator } = this.props.form;

    return (
      <div>
        {
          // JSON.stringify(customerVerify)
        }
        <Form>
          <Card title="身份验证">
            <CustomerList
              hideDocuments={hideDocuments}
              hideThirdVerify={hideThirdVerify}
              attorneySignature={true}
              customerFooter={(customer, index) => {
                // console.log('customerFooter in customerChecker');
                return this.renderCustomerFooter(riskBusinessDetails, customer, index);
              }}
            />
          </Card>

          <Card style={{ marginTop: '15px' }} title="家庭住址验证">
            <Row>
              <Col span={12}>
                <FormItem label="家庭住址：" {...formItemLayout}>
                  {customerVerify.homeAddressVerify.residDetail}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="住宅类型" {...formItemLayout}>
                  {this.handleHomeAddressVerify(customerVerify.homeAddressVerify.residState)}
                  {/* {customerVerify.homeAddressVerify.residState == 1 ? "自有" : "租赁"} */}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={12}>
                <FormItem label="家访意见" {...formItemLayout}>
                  {customerVerify.homeAddressVerify.homeVisitNote}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label="家访人" {...formItemLayout}>
                  {customerVerify.homeAddressVerify.honmeVisitor}
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span={24}>
                <FormItem label="家访照片" labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
                  {customerVerify.homeAddressVerify.homeImg.length == 0 ? (
                    <img src={nopictures} style={{ width: '10%', height: '10%' }} />
                  ) : (
                    customerVerify.homeAddressVerify.homeImg.map((item, index) => {
                      return (
                        <Col span={3}>
                          <ImageDisplayer
                            src={solo.imgShow + item}
                            index={index}
                            fileList={customerVerify.homeAddressVerify.homeImg}
                          />
                        </Col>
                      );
                    })
                  )}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col span={12}>
                <FormItem label="审批意见" {...formItemLayout}>
                  {getFieldDecorator('homeAddressVerify', {
                    initialValue: customerVerify.homeAddressVerify.homeAddressVerify,
                  })(
                    <Radio.Group disabled={!checkDetailsValue}>
                      <Radio value={1}>
                        <span style={{ color: 'green' }}>
                          一致<Icon type="check" />
                        </span>
                      </Radio>
                      <Radio value={0}>
                        <span style={{ color: 'red' }}>
                          不同<Icon type="close" />
                        </span>
                      </Radio>
                    </Radio.Group>
                  )}
                </FormItem>
              </Col>
            </Row>
          </Card>

          <Card style={{ marginTop: '15px' }} title="偿债意愿核实">
            {/* <FormItem label="签字照片" labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>

              {customerVerify.willVerify.signImg.length == 0 ?
                <img src={nopictures} style={{ width: '10%', height: '10%' }} />
                :
                customerVerify.willVerify.signImg.map(item => {
                  return <ImageDisplayer src={item} />
                })
              }
            </FormItem> */}

            <FormItem label="面签视频" labelCol={{ span: 3 }} wrapperCol={{ span: 21 }}>
              {customerVerify.willVerify.videoSign.length == 0 ? (
                <img src={novideo} style={{ width: '10%', height: '10%' }} />
              ) : (
                <Upload defaultFileList={this.state.attachmentMap.contract}>
                  {/* <div style={{ lineHeight: '40px', color: '#999999' }}>
                    </div> */}
                </Upload>
              )}
            </FormItem>
            <Row>
              <Col span={12}>
                <FormItem label="审批意见" {...formItemLayout}>
                  {getFieldDecorator('willVerify', {
                    initialValue: customerVerify.willVerify.willVerify,
                  })(
                    <Radio.Group disabled={!checkDetailsValue}>
                      <Radio value={1}>
                        <span style={{ color: 'green' }}>
                          一致<Icon type="check" />
                        </span>
                      </Radio>
                      <Radio value={0}>
                        <span style={{ color: 'red' }}>
                          不同<Icon type="close" />
                        </span>
                      </Radio>
                    </Radio.Group>
                  )}
                </FormItem>
              </Col>
            </Row>
            {checkDetailsValue ? (
              <div>
                <FormItem wrapperCol={{ span: 21, offset: 3 }} label="">
                  <Button type="primary" onClick={this.haandleCustomerSubmit}>
                    保存
                  </Button>
                </FormItem>
              </div>
            ) : null}
          </Card>
        </Form>
      </div>
    );
  }
}
